<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted, ref} from 'vue';

const viewer = ref();

onMounted(() => {
  //初始化地球
  initCesium()
})

//初始化地球
const initCesium = () => {
  // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZmJjODE1Yy1kMjU4LTQyZTgtODAyZC1mNzE2MDNhMmQ3YzUiLCJpZCI6MTk5NzQwLCJpYXQiOjE3MDk2Mjg5Mjh9.GuRbyEbm8FknaFOM34kGm9wCbf2XVjp873h_QD-Vs7A"
  //默认定位到中国上空
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      75.0, // 东
      0.0, // 南
      140.0, // 西
      60.0 // 北
  );
  viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示全屏按钮
    fullscreenButton: true,
    // 是否显示右上角的查询按钮
    geocoder: false,
    // 是否显示HOME按钮
    homeButton: true,
    // 是否显示场景控制按钮
    sceneModePicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否显示选择框
    selectionIndicator: false,
    //粒子效果
    shouldAnimate: true,
  });

  //离线地图
  viewer.value.imageryLayers.addImageryProvider(
      //1、nginx代理模式
      new Cesium.UrlTemplateImageryProvider({url: "http://192.168.56.11:8099/cesium/{z}/{x}/{y}.jpg",})
  )
  viewer.value.imageryLayers.addImageryProvider(
      //2、项目文件模式
      new Cesium.UrlTemplateImageryProvider({
        type: "xyz",
        url: "cesium/map/{z}/{x}/{y}.png",
        minimumLevel: 0,
        maximumLevel: 3,
        minimumTerrainLevel: 0,
        maximumTerrainLevel: 3,
        show: true,
      })
  )

  //Bing Maps Labels
  // viewer.value.imageryLayers.addImageryProvider(
  //     await Cesium.IonImageryProvider.fromAssetId(2411391),
  // );

  // 隐藏cesiumLogo
  viewer.value.cesiumWidget.creditContainer.style.display = "none";

  //场景亮度
  viewer.value.scene.light = new Cesium.DirectionalLight({
    direction: new Cesium.Cartesian3(1, -1, -1),
    color: Cesium.Color.WHITE,
    intensity: 4
  });

}
</script>

<style scoped>
html, body, #cesiumContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
